<template>
    <ContentBase>
        <div class="content-top">
            <span style="font-size: 150%;">宿舍报修</span>
            <button type="button" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#addApply">添加申请</button>
            <div class="modal fade" id="addApply" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="addApplyLabel">添加申请</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="select-area">
                                <div class="select-area-item">
                                    <div style="min-width: 85px; font-weight: bold;">报修种类：</div>
                                    <select class="form-select" aria-label="Default select example" v-model="repairType" >
                                        <option selected>请选择报修种类</option>
                                        <option value="水电">水电</option>
                                        <option value="木工(包括门锁)">木工(包括门锁)</option>
                                        <option value="空调">空调</option>
                                        <option value="热水">热水</option>
                                        <option value="其他(包括泥工、纱窗、玻璃)">其他(包括泥工、纱窗、玻璃)</option>
                                    </select>
                                </div>
                                <div class="select-area-item" v-if="repairType != '请选择报修种类'">
                                    <div style="min-width: 85px; font-weight: bold;">报修项目：</div>
                                    <select class="form-select" aria-label="Default select example" v-model="repairItem">
                                        <option selected>请选择报修项目</option>
                                        <option :value="item" v-for="item in repairItems" :key="item">{{ item }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="info-row" style="margin-top: 20px;">
                                <label for="repairReason" class="info-label">报修原因:</label>
                                <input type="text" id="repairReason" class="info-input" v-model="repairReason" placeholder="10字以内" />
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div style="color: red; margin-right: 20px;" >{{ error_message }}</div>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">关闭</button>
                            <button type="button" class="btn btn-primary" @click="clickAddApply">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="nav nav-tabs" style="margin-bottom: 20px;">
            <li class="nav-item">
                <router-link :class="route_name == 'RepairPending' ? 'nav-link active' : 'nav-link'" :to="{name: 'RepairPending'}">待处理</router-link>
            </li>
            <li class="nav-item">
                <router-link :class="route_name == 'RepairRevoke' ? 'nav-link active' : 'nav-link'" :to="{name: 'RepairRevoke'}">已撤销</router-link>
            </li>
            <li class="nav-item">
                <router-link :class="route_name == 'RepairProcessed' ? 'nav-link active' : 'nav-link'" :to="{name: 'RepairProcessed'}">已处理</router-link>
            </li>
        </ul>
        <router-view />
    </ContentBase>
</template>

<script setup>
import ContentBase from '../components/ContentBase';
import { Modal } from 'bootstrap/dist/js/bootstrap';    // 引入Modal的API
import { useRoute } from 'vue-router';
import { computed, ref, watch } from 'vue';
import { useStore } from 'vuex';
import $ from 'jquery';

const route = useRoute();
const store = useStore();
let route_name = computed(() => route.name);
const repairType = ref('请选择报修种类');
const repairItem = ref('请选择报修项目');
const repairReason = ref('');
const repairItems = ref([]);
const error_message = ref('');

watch(repairType, () => {
    if (repairType.value == '水电') {
        repairItems.value = [
            '空开', '灯管', '寝室线路故障', '冷水阀坏', '灯座脱落', '水池下水管脱落(坏)',
            '冷水管爆裂', '管卡', '开关', '洗脸间水龙头', '洗脸间灯泡', '厕所冲水阀', '厕所大便器堵', 
            '厕所灯泡', '地漏堵', '厕所总阀', '水池堵', '插座'
        ]
    } else if (repairType.value == '木工(包括门锁)') {
        repairItems.value = [
            '晾衣绳', '门栓', '窗户月牙锁', '桌子', '蚊帐钩', '厕所门', '电子门故障', '护栏', '抽屉',
            '寝室门', '衣柜挂衣杆', '衣柜', '门搭扣', '床板', '爬梯坏', '寝室门锁', '板凳', '衣柜衣杆托',
        ]
    } else if (repairType.value == '空调') {
        repairItems.value = [
            '空调漏水', '不制热', '有电无法开机', '不制冷', '其他'
        ]
    } else if (repairType.value == '热水') {
        repairItems.value = [
            '卡机接头漏水', '卫生间卡机不读卡', '厕所水龙头', '浴室热水阀', '混水阀', '热水水龙头', '淋浴头', '热水水管漏水'
        ]
    } else if (repairType.value == '其他(包括泥工、纱窗、玻璃)') {
        repairItems.value = [
            '床架弯曲', '窗户玻璃', '洗脸间顶漏水', '换纱', '无纱窗', '厕所顶漏水', '寝室顶漏水', '纱窗坏',
            '气窗', '墙砖', '地砖', '墙面脱皮', '插座底盒松脱', '床加固'
        ]
    } else {
        repairItems.value = [];
    }
})

const clearMessage = () => {
    error_message.value = '';
}

const clickAddApply = () => {
    error_message.value = '';
    $.ajax({
        url: "http://localhost:3000/api/student/add-repair",
        type: "POST",
        data: {
            repairType: repairType.value,
            repairItem: repairItem.value,
            repairReason: repairReason.value
        },
        headers: {
            'Authorization': "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message === "success") {
                Modal.getInstance("#addApply").hide();  // 关闭Modal框
                window.location.reload();
            } else {
                error_message.value = resp.error_message;
                setTimeout(clearMessage, 4000);
            }
        },
        error(resp) {
            console.log(resp);
        }
    });
}

</script>

<style scoped>

.content-top {
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    align-items: center; /* 确保 label 和 input 垂直居中 */
    justify-content: center;
    gap: 15px;
}

.info-label {
    font-weight: bold;
    width: 80px;
    text-align: right;
}

.info-input {
    flex: 1;
    max-width: 250px; /* 限制输入框最大宽度 */
    padding: 10px; /* 增加内边距使其更美观 */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}

.select-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
.select-area-item {
    display: flex;
    align-items: center;
    width: 330px;
}

</style>